In Spread.Views, you can use the action property as a string or an array in a column. You can either use built-in actions such as edit and cancel or specify custom actions. Each action is an object that contains name, presenter, and handler parameters. By default, an action is set in a button.

You can pass the following arguments to the handler function.

• hitInfo
• dataItem
• gridModel

Use the following steps to see how the actions are implemented in a column.

Sample Code

1. Define columns for the grid. By default, an action is set in a button, so you only need to specify the button name in the column definition.
   

    var columns = [
           { id: 'firstName', caption: 'First Name', dataField: 'firstName', width: '80' },
              { id: 'lastName', caption: 'Last Name', dataField: 'lastName', width: '80' },
              { id: 'score', caption: 'Score', dataField: 'score', width: '80', dataType: 'number' },
              { id: 'position', caption: 'Position', dataField: 'position', width: '*' },
              {
                  id: 'controlPanel',
                  action: [{
                      name: 'edit'
                  }, {
                      name: 'details',
                      handler: showDetails
                  }],
                  width: 270
              }
      ];

2. Define a function for the action buttons.

    function showDetails(args) {
      var hitInfo = args.hitInfo;
      var dataItem = args.dataItem;
      initDialog(dataItem);
    }
   
    function initDialog(dataItem) {
      var overlay = $(<div class="dialog-overlay"></div>');
      var dialogContainer = $('<div class="dialog-container"></div>');
      var dialog = $('<div class="dialog-header"><span style="font-weight:bold">Applicant Details</span><div class="dialog-close-button"><span>✕</span></div></div>' +
          '<div class="dialog-body">' +
          '<div style="font-size:20px;font-weight:bold;">' + dataItem.firstName + ' ' + dataItem.lastName + '</div>' +
          '<div style="font-style:italic">' + dataItem.position + '</div>' +
          '<div style="margin-top:15px;">' + dataItem.advantage + '</div></div>');
      dialogContainer.append(dialog);
      $(document.body).append(overlay).append(dialogContainer);
      overlay.on('mousewheel', function () {
          return false;
      });
      $('.dialog-close-button').on('click', function () {
          overlay.remove();
          dialogContainer.remove();
      });
   
      var screenWindow = $(window);
      var left = parseInt((screenWindow.width() - dialogContainer.width()) / 2 + window.pageXOffset);
      var top = parseInt((screenWindow.height() - dialogContainer.height()) / 2 + window.pageYOffset);
      dialogContainer.css({
          left: left,
          top: top
      });
    }

See Also

rowHeight

colMinWidth

allowEditing